import React from 'react';
import {connect} from 'react-redux';
import {safeAuto,goBack} from "../../../assets/js/utils";
import HeadNavComponent from "../../../components/headNav";
import {Picker,Toast} from 'antd-mobile';
import {province} from '../../../assets/province/province';
import request from '../../../assets/js/utils/request';
import Css from '../../../assets/css/home/address/index.css';
class addressAdd extends React.Component{
    constructor(props){
        super(props);
        safeAuto(props);
        this.state={
            sProvinceValue:'',
            sProvince:'',
            sCity:'',
            sArea:'',
            sName:'',
            sCellphone:'',
            sAddress:'',
            bChecked:false
        }
        this.bSumbit=true
    }
    //解决内存泄漏
    componentWillUnmount(){
        this.setState = (state, callback) => {
            return;
        };
    }
    //获取收货人姓名
    changeName(e){
        this.setState({sName:e.target.value})
    }
    //获取收货人手机号
    changeCellphone(e){
        this.setState({sCellphone:e.target.value})
    }
    //获取收货人详细地址
    changeAddress(e){
        this.setState({sAddress:e.target.value})
    }
    //改变是否默认地址
    changeChecked(){
        this.setState({bChecked:!this.state.bChecked})
    }
    //点击提交
    submit(){
        if(this.state.sName.match(/^\s*$/)){
            Toast.info('请输入收货人姓名',2);
            return false;
        }
        if(this.state.sCellphone.match(/^\s*$/)){
            Toast.info('请输入收货人手机号',2);
            return false;
        }
        if(!this.state.sCellphone.match(/^1[0-9][0-9]{9}/)) {
            Toast.info('请输入正确的手机号',2);
            return false;
        }
        if(this.state.sProvinceValue.match(/^\s*$/)){
            Toast.info('请选择收货地址',2);
            return false;
        }
        if(this.state.sAddress.match(/^\s*$/)) {
            Toast.info('请输入详细地址',2);
            return false;
        }
        if(this.bSumbit){
            this.bSumbit=false;
            let data={
                uid:this.props.state.redLogin.uid,
                name:this.props.state.redLogin.username,
                cellphone:this.state.sCellphone,
                province:this.state.sProvince,
                city:this.state.sCity,
                area:this.state.sArea,
                address:this.state.sAddress,
                isdefault:this.state.bChecked?'1':'0',
                props:this.props
            }
            let sUrl=window.base.config.baseUrl+'user/address/add?token='+window.base.config.token;
            request(sUrl,'post',data).then((res)=>{
                if(res.code===200){
                    if (this.state.bChecked){
                        localStorage['aid']=res.data.aid;
                        sessionStorage.removeItem('aid')
                    }
                    Toast.info('添加成功',2 ,()=>{
                        goBack(this.props)
                    })
                }
            })
        }

    }
    render(){
        return(
            <div className={Css['main']}>
                <HeadNavComponent title={'添加收货地址'} ></HeadNavComponent>
                <div className={Css['group']}>
                    <div className={Css['row']}>收货人</div>
                    <div className={Css['column']}><input type='text' placeholder='收货人姓名' onChange={this.changeName.bind(this)} value={this.state.sName}/></div>
                </div>
                <div className={Css['group']}>
                    <div className={Css['row']}>联系方式</div>
                    <div className={Css['column']}><input type='text' placeholder='联系人手机号' onChange={this.changeCellphone.bind(this)} value={this.state.sCellphone}/></div>
                </div>
                <div className={Css['group']}>
                    <div className={Css['row']}>所在地区</div>
                    <Picker extra="请选择(可选)" data={province} title="选择地址"
                            onOk={e => {
                                this.setState({sProvinceValue:e.join(' '),sProvince:e[0],sCity:e[1],sArea:e[2]!==undefined?e[2]:''})
                            }}
                    >
                        <div className={Css['column']}><input type='text' placeholder='请选择收货地址' readOnly value={this.state.sProvinceValue}/></div>
                    </Picker>
                </div>
                <div className={Css['group']}>
                    <div className={Css['row']}>详细地址</div>
                    <div className={Css['column']}><input type='text' placeholder='街道详细地址' onChange={this.changeAddress.bind(this)} value={this.state.sAddress}/></div>
                </div>
                <div className={Css['group']}>
                    <div className={Css['row']}>设置为默认地址</div>
                    <div className={Css['column']}><input type='checkbox' checked={this.state.bChecked} onChange={this.changeChecked.bind(this)}/></div>
                </div>
                <div className={Css['group']}>
                    <div className={Css['subim']} onClick={this.submit.bind(this)}>保存</div>
                </div>
            </div>
        )
    }
}
export default connect((state)=>{
    return{
        state:state
    }
})(addressAdd)